<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
    <div class="search-container search-fixed">
			<div class="search-wrapper">
				<div class="search-icon">
					<i class="aui-iconfont aui-icon-search"></i>
				</div>
				<div class="search-input">
					<input placeholder="搜索医院" autocomplete="off"/>
				</div>
			</div>
		</div>

		<div class="adv-container">
			<div class="adv-wrapper">
				<img src="images/ad.png"/>
			</div>
		</div>

		<div class="nav-container">
			<div class="nav-wrapper">
				<a class="nav-item" href="hsjc.html">
					<img src="images/nav_1.png"/>
					<h4>核酸检测</h4>
				</a>
				<a class="nav-item" href="all.html">
					<img src="images/nav_2.png"/>
					<h4>全部科室</h4>
				</a>
				<a class="nav-item" href="notice.html">
					<img src="images/nav_3.png"/>
					<h4>公告</h4>
				</a>
				<a class="nav-item" href="help.html">
					<img src="images/nav_4.png"/>
					<h4>帮助中心</h4>
				</a>
				<a class="nav-item" href="center.html">
					<img src="images/nav_5.png"/>
					<h4>个人中心</h4>
				</a>
			</div>
		</div>

		<div class="div-line"></div>

		<div class="filter-container">
			<div class="filter-wrapper">
				<div class="filter-left">
					<h4>按区域</h4>
					<i class="arrow-down"></i>
				</div>
				<div class="filter-right">
					<div class="filter-item filter-item-active">
            <span>综合排序</span>
            <i class="filter-rank"></i>
          </div>
          <div class="filter-item">
            <span>按距离</span>
            <i class="filter-location"></i>
          </div>
				</div>
			</div>

      <div class="filter-area-list" style="display:none;">
        <div class="filter-area-item filter-area-active">
          <a href="javascript:;">全部</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">东城区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">西城区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">朝阳区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">丰台区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">石景山区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">海淀区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">门头沟区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">房山区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">通州区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">顺义区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">昌平区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">大兴区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">怀柔区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">平谷区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">密云区</a>
        </div>
        <div class="filter-area-item">
          <a href="javascript:;">延庆区</a>
        </div>
      </div>
		</div>

    <div class="origin-list">
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_1.png"/>
        </div>
        <div class="origin-body">
          <h4>北京协和医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天8:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_2.png"/>
        </div>
        <div class="origin-body">
          <h4>中国人民解放军总医院(301医院)</h4>
          <p>
            <span>三级甲等</span>
            <span>每天08:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_3.png"/>
        </div>
        <div class="origin-body">
          <h4>北京大学第一医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天16:00放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_4.png"/>
        </div>
        <div class="origin-body">
          <h4>北京大学第三医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天07:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="tumour.html">
        <div class="origin-logo">
          <img src="images/hos_5.png"/>
        </div>
        <div class="origin-body">
          <h4>北京医学科学院肿瘤医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天9:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_1.png"/>
        </div>
        <div class="origin-body">
          <h4>北京协和医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天8:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_2.png"/>
        </div>
        <div class="origin-body">
          <h4>中国人民解放军总医院(301医院)</h4>
          <p>
            <span>三级甲等</span>
            <span>每天08:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_3.png"/>
        </div>
        <div class="origin-body">
          <h4>北京大学第一医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天16:00放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_4.png"/>
        </div>
        <div class="origin-body">
          <h4>北京大学第三医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天07:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_5.png"/>
        </div>
        <div class="origin-body">
          <h4>北京医学科学院肿瘤医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天9:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_3.png"/>
        </div>
        <div class="origin-body">
          <h4>北京大学第一医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天16:00放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_2.png"/>
        </div>
        <div class="origin-body">
          <h4>中国人民解放军总医院(301医院)</h4>
          <p>
            <span>三级甲等</span>
            <span>每天08:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_3.png"/>
        </div>
        <div class="origin-body">
          <h4>北京大学第一医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天16:00放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_4.png"/>
        </div>
        <div class="origin-body">
          <h4>北京大学第三医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天07:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_5.png"/>
        </div>
        <div class="origin-body">
          <h4>北京医学科学院肿瘤医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天9:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_1.png"/>
        </div>
        <div class="origin-body">
          <h4>北京协和医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天8:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_2.png"/>
        </div>
        <div class="origin-body">
          <h4>中国人民解放军总医院(301医院)</h4>
          <p>
            <span>三级甲等</span>
            <span>每天08:30放号</span>
          </p>
        </div>
      </a>
      <a class="origin-item" href="hospital.html">
        <div class="origin-logo">
          <img src="images/hos_3.png"/>
        </div>
        <div class="origin-body">
          <h4>北京大学第一医院</h4>
          <p>
            <span>三级甲等</span>
            <span>每天16:00放号</span>
          </p>
        </div>
      </a>

    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="js/tagetUrl.js"></script>
<script src="js/commons.js"></script>
<script type="text/javascript">
  $(function () {
    getUserInfo();
    function getUserInfo() {
      var code = location.href.split("&")[0].split("=")[1];
      var openid = localStorage.getItem("openid");
      if (openid == "null") {
        if (code != null) {
          $.ajax({
            type: "post",
            url: "http://guowang.nat300.top/wechat114/openid",
            data: {"code": code},
            dataType: "json",
            success: function (data) {
              if (data.code == 0) {
                localStorage.setItem("openid", data.data);
              }
            }
          })
        }
      } else {
        $.ajax({
          type: "post",
          url: "http://guowang.nat300.top/wechat114/selectWxUser",
          data: {"openid": openid},
          dataType: "json",
          success: function (data) {

          }
        })
      }
    }
  })
  getLocationXY();
  function getLocationXY(){
    $.ajax({
      type:"post",
      url:targetUrl+"/wechat114/jsConfig",
      data:{"url": location.href.split("#")[0]},
      dataType:"json",
      success:function(data){
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.data.appId, // 必填，公众号的唯一标识
          timestamp: data.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
          signature: data.data.signature,// 必填，签名
          jsApiList: ["getLocation"] // 必填，需要使用的JS接口列表
        });
        wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
            var latitudeY = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            var longitudeX = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒计
            var accuracy = res.accuracy; // 位置精度
            alert("X: " + longitudeX + " , Y: " + latitudeY);
            alert("速度: " + speed + " , 位置精度: " + accuracy);
          }
        });
      }
    })
  }

function getScrollTop() {
  var scrollTop = 0;
  if (document.documentElement && document.documentElement.scrollTop) {
      scrollTop = document.documentElement.scrollTop;
  }
  else if (document.body) {
      scrollTop = document.body.scrollTop;
  }
  return scrollTop;
}

function fixNavs() {
    var scrollTop = getScrollTop();
    if (scrollTop >= 200) {
        $('.filter-container').addClass('filter-fixed');
    } else {
        $('.filter-container').removeClass('filter-fixed');
    }
}

$(document).ready(function () {
    window.onscroll = function () {
        fixNavs();
    };
});

$('.filter-item').click(function () {
  $('.filter-item').removeClass('filter-item-active');
  $(this).addClass('filter-item-active');
})

$('.filter-left').click(function () {
  var name = $(this).find('i').attr('class');
  if(name=='arrow-down'){
    $(this).find('i').removeClass('arrow-down');
    $(this).find('i').addClass('arrow-up');
    $('.filter-area-list').css('display','flex');
  }
  else if(name=='arrow-up'){
    $(this).find('i').addClass('arrow-down');
    $(this).find('i').removeClass('arrow-up');
    $('.filter-area-list').css('display','none');
  }
})

$('.filter-area-item').click(function () {
    $('.filter-area-item').removeClass('filter-area-active');
    $(this).addClass('filter-area-active');

    $('.filter-left').find('i').addClass('arrow-down');
    $('.filter-left').find('i').removeClass('arrow-up');
    $('.filter-area-list').css('display','none');
})
</script>
</html>
